<template>
	<view class="anxinqian_vcode">
		<view class="vcode_box">
			<view class="vcode_box_head">
				<view class="vcode_box_head_title">输入验证码</view>
				<view class="vcode_box_head_stitle">
					验证码已发送至：<text class="vcode_box_phone">{{phone}}</text>
				</view>
			</view>
			<view class="vcode_box_input_part" style="margin-bottom: 20px;">
				<up-code-input mode='bottomLine' class="myCode" v-model="code" :space="5"></up-code-input>
				<div style="width: 80px;margin-left: 10px;">
					<up-code ref="uCode" @change="codeChange"></up-code>
					<up-button style="height: 35px;" type="primary" @tap="getCode"><span
							style="font-size: 10px;">{{tips}}</span></up-button>
				</div>
			</view>
			<view>
				<up-button type="primary" color="rgb(0,129,255)" customStyle="borderRadius:5px"
					@click="confirm">验证</up-button>
			</view>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getUserProfile
	} from "../../../api/user.js"
	import {
		getAnxinqianCode,
		confirmAnxinqianCode
	} from "@/api/driver.js"



	/* 数据 */
	const uToastRef = ref(null)
	// 获取验证码按钮
	const uCode = ref(null)
	const anxinqianId = ref('')
	// 验证码
	const code = ref('')
	// 页面深度
	const delta = ref(1)
	// 电话号码
	const phone = ref('')
	const tips = ref('')


	/* 函数 */
	const codeChange = (text) => {
		tips.value = text
	}
	// 获取验证码
	const getCode = async () => {
		if (uCode.value.canGetCode) {
			uToastRef.value.show({
				type: 'loading',
				message: "正在获取验证码",
				duration: -1
			})
			let codeRes = await getAnxinqianCode({
				anxinqianId: anxinqianId.value
			})
			uToastRef.value.hide()
			if (codeRes.success) {
				uToastRef.value.show({
					position: "top",
					type: 'success',
					message: "验证码已发送"
				})
				// 通知验证码组件内部开始倒计时
				uCode.value.start()
			}
		} else {
			uToastRef.value.show({
				position: "top",
				type: 'error',
				message: "倒计时结束后再发送"
			})
		}
	}
	// 获取用户信息
	const getUserInfo = async () => {
		uToastRef.value.show({
			message: '加载中',
			type: 'loading',
			duration: -1
		})
		let res = await getUserProfile()
		uToastRef.value.hide()
		if (res.success) {
			phone.value = res.data.phone.slice(0, 3) + '*'.repeat(4) + res.data.phone.slice(-4)
			if (!res.data.anxinqianId) {
				uToastRef.value.show({
					message: '你还未开通电子签账户',
					type: 'error',
					complete() {
						uni.navigateBack({
							delta: delta.value
						})
					}
				})
				return
			} else if (parseInt(res.data.anxinqianConfirm)) {
				uToastRef.value.show({
					message: '你已验证电子签',
					type: 'error',
					complete() {
						uni.navigateBack({
							delta: delta.value
						})
					}
				})
				return
			} else {
				anxinqianId.value = res.data.anxinqianId
				await getCode()
			}
		}
	}
	// 验证按钮
	const confirm = async () => {
		if (!code.value || code.value.length !== 6) {
			uToastRef.value.show({
				message: '请填写验证码',
				type: 'warning'
			})
			return
		}
		uToastRef.value.show({
			message: '验证中',
			type: 'loading',
			duration: -1
		})
		let res = await confirmAnxinqianCode({
			verifyCode: code.value
		})
		uToastRef.value.hide()
		if(res.success){
			uToastRef.value.show({
				message: '您已验证电子签！',
				type: 'error',
				complete() {
					uni.navigateBack({
						delta: delta.value
					})
				}
			})
		}
	}
	// 初始化封装
	const init = async () => {
		await nextTick()
		await getUserInfo()
	}

	// 钩子
	onLoad((options) => {
		if (options.delta) {
			delta.value = options.delta
		}
		init()
	})
</script>

<style lang="scss" scoped>
	.myCode ::v-deep .u-code-input__item {
		border-bottom: 1px solid #3c9cff;
	}

	.anxinqian_vcode {
		min-height: calc(100vh - 44px);
		background-color: #fff;

		.vcode_box {
			width: 85%;
			margin: 0 auto;

			.vcode_box_head {
				padding: 80px 0 40px;

				.vcode_box_head_title {
					font-size: 26px;
					font-weight: bold;
					padding-bottom: 10px;
				}

				.vcode_box_head_stitle {
					color: #777;

					.vcode_box_phone {
						color: rgb(64, 117, 247);
					}
				}
			}

			.vcode_box_input_part {
				display: flex;
				justify-content: center;
			}

			.reget_part {
				padding: 20px 0 30px 10px;
				color: #999;

				&.reget {
					color: rgb(64, 117, 247);
				}
			}
		}
	}
</style>